<html>
<head>
    <title>轨迹生成</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-10">
            <div id="map"></div>
        </div>
        <div class="col-md-2">
            <div class="row">
                <div class="col-md-3">imei:</div>
                <div class="col-md-9"><input type="text" id="imei" value="868120140229813"/></div>
            </div>
            <div class="row">
                <div class="col-md-3">&nbsp;</div>
                <div class="col-md-9">
                    <input type="button" id="start" value="开始取点"/>
                    <input type="button" id="clear" value="清理" title="清理图层及数据"/>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" id="lnglats"></div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="lngLat" value=""/>
</body>
</html>

<!-- jquery -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=1969aaf7ae7e0dae88a1515a4f4496d3"></script>

<style type="text/css">
    body {
        margin: 0;
    }

    #map {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    .row {
        margin: 5px;
    }
</style>

<script type="text/javascript">

    $(document).ready(function () {
        $("#start").click(function () {
            if ($.trim($("#imei").val()).length == 0) {
                alert("请输入IMEI");
                return;
            }

            if ($("#start").val() == "开始取点") {
                startGetPoint();
            } else {
                endGetPoint()
            }
        });

        $("#clear").click(function () {
            clearMap()
        });

        loadMap();
    });

    var map = null;
    var mapClick = null;
    var _lines = new Array();
    var _markers = new Array();
    var _lngLats = new Array();

    //加载地图
    function loadMap() {
        map = new AMap.Map('map');
        map.setZoom(10);
        map.setCenter([118.781586, 32.042141]);
        map.plugin(["AMap.MapType"], function () {
            //地图类型切换
            var type = new AMap.MapType({
                defaultType: 0 //使用2D地图
            });
            map.addControl(type);
        });

        mapClick = function (e) {
            if (_lngLats.length > 0) {
                var lngLat = _lngLats[_lngLats.length - 1];
                var points = lngLat.getLat() + "," + lngLat.getLng() + ";" + e.lnglat.getLat() + "," + e.lnglat.getLng() + ";";
                showLine(points, "#436EEE");
            }
            _lngLats.push(e.lnglat);
            showLngLat(e.lnglat.getLat(), e.lnglat.getLng());
            savePoint(e.lnglat.getLat(), e.lnglat.getLng());
        }
    }

    // 添加地图点击事件
    function addMapClickEvent() {
        map.on('click', mapClick);
    }

    // 移除地图点击事件
    function removeMapClickEvent() {
        map.off('click', mapClick);
    }

    // 显示坐标点到地图
    function showPoint(lat, lng) {
        var marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [lng, lat]
        });
        marker.setMap(map);
        _markers.push(marker);
        map.setCenter([lng, lat]);
    }

    // 显示坐标到列表
    function showLngLat(lat, lng) {
        $("#lnglats").append('<p>' + lng + ',' + lat + '</p>');
    }

    // 显示折线
    function showLine(points, color) {
        var path = new Array();

        var pointArr = points.split(';');
        for (var i = 0; i < pointArr.length; i++) {
            if (pointArr[i].length == 0) {
                continue;
            }

            var lngLat = pointArr[i].split(',');
            var p = new Array();
            p.push(lngLat[1]);
            p.push(lngLat[0]);

            path.push(p);
        }

        var polyline = new AMap.Polyline({
            path: path,           //设置线覆盖物路径
            strokeColor: color,     //"#3366FF" 线颜色
            strokeOpacity: 1,        //线透明度
            strokeWeight: 2,         //线宽
            strokeStyle: "solid",    //线样式
            strokeDasharray: [10, 5] //补充线样式
        });
        polyline.setMap(map);
        _lines.push(polyline);
        map.setCenter(path[0]);
    }

    // 开始取点
    function startGetPoint() {
        $('#start').val("停止取点");
        addMapClickEvent();
    }

    // 停止取点
    function endGetPoint() {
        $('#start').val("开始取点")
        removeMapClickEvent();
        _lngLats.length = 0;
    }

    // 清理地图
    function clearMap() {
        map.remove(_markers);
        map.remove(_lines);

        _markers.length = 0;
        _lines.length = 0;

        $("#lnglats").html("");
    }

    // 保存轨迹点
    function savePoint(lat, lng) {
        var data = {};
        data.imei = $("#imei").val();
        data.lng = lng;
        data.lat = lat;

        $.ajax({
            type: 'POST',
            url: "${request.contextPath}/api/track/save",
            dataType: "json",
            data: data,
            success: function (json) {
                alert(json);
            }
        });
    }
</script>
</html>
